<template>
  <div class="wrap">
    <div slot="header" class="clearfix">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>课程中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的课程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <CreateCourse @reload="getList" :visible.sync="isTeacher"></CreateCourse>
    <JoinCourse @reload="getList" :visible.sync="isStudent"></JoinCourse>
    <el-row class="list">
      <el-col
        :span="5"
        v-for="(item,key,index) in courseList"
        :key="index"
        :offset="2"
        style="margin-bottom:60px;margin-left: 1.5%;margin-right: 2.5%;max-width:358px;max-height:286px"
      >
        <el-card
          class="course-card"
          @click.native="clickCard(item.cno)"
          :body-style="{ padding: '1px' }"
        >
          <div class="image">
            <img :src="item.cover"/>
          </div>
          <ul style="padding: 14px;">
            <li class="cname">{{item.cname}}</li>
            <li class="time">授课老师：{{ item.tname }}</li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="2" style="margin-bottom:35px">
        <el-card @click.native="openForm" class="new" :body-style="{ padding: '15px' }">
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <p class="new-text">添加新的课程</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CreateCourse from "./CreateCourse";
import { getCourseList } from "@/api/course";
import JoinCourse from "./JoinCourse";

export default {
  name: "",
  data() {
    return {
      currentDate: new Date(),
      isStudent: false,
      isTeacher: false,
      courseList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    openForm() {
      const type = this.$store.state.user.type;
      if (type == "1") {
        this.isStudent = true;
      } else {
        this.isTeacher = true;
      }
    },
    async getList() {
      const { data: res } = await getCourseList(
        this.$store.state.user.type,
        this.$store.state.user.id
      );
      this.courseList = res.data.courseList;
    },
    clickCard(courseId) {
      this.$router.push(`courseDetail/${courseId}`);
    }
  },
  components: {
    CreateCourse,
    JoinCourse
  }
};
</script>

<style scpoed>
</style>
<style style="scss" scpoed>
.list {
  overflow: auto;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.cname {
  font-size: 20px;
  color: #409eff;
}
.time {
  font-size: 8px;
  color: #999;
}
ul > li {
  text-align: left;
  margin-bottom: 10px;
}
ul > li:last-child {
  margin-bottom: 0;
}
.image {
  cursor: pointer;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.image>img{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.image > img:hover {
 transform: scale(1.4);
  transition: all 0.6s;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.new {
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  bottom: 17px;
  right: 105px;
  overflow: hidden;
  width: 360px;
  height: 280px;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 20px;
}
.avatar-uploader-icon {
  cursor: pointer;
  line-height: 170px;
  text-align: center;
}
.course-card {
  width: 360px;
}
.new:hover .el-icon-plus {
  font-size: 100px;
  transition: font-size 0.4s;
}
.new:hover .new-text {
  top: -30px;
  transition: top 0.4s;
}
.new .el-icon-plus {
  color: #333333;
  margin-top: 20px;
  font-size: 60px;
}
.new-text {
  font-size: 20px;
  color: #333333;
  position: relative;
  top: 200px;
  font-weight: 900;
}
</style>
